<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除进度动画</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 96vh;
            background-color: #f5f5f5;
            font-family: Arial, sans-serif;
        }
        
        .container {
            width: 80%;
            max-width: 600px;
            text-align: center;
        }
        
        .progress-container {
            margin: 30px 0;
            height: 30px;
            background-color: #e0e0e0;
            border-radius: 15px;
            overflow: hidden;
            position: relative;
        }
        
        .progress-bar {
            height: 100%;
            width: 0%;
            background-color: #ff4757;
            border-radius: 15px;
            transition: width 0.1s linear;
        }
        
        .progress-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-weight: bold;
            text-shadow: 0 0 3px rgba(0,0,0,0.5);
        }
        
        .counter {
            font-size: 3rem;
            font-weight: bold;
            color: #333;
            margin: 20px 0;
        }
        
        .title {
            font-size: 1.5rem;
            color: #555;
            margin-bottom: 10px;
        }
        
        .remaining {
            font-size: 1rem;
            color: #777;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="title">正在删除...</div>
        <div class="counter">​​1995</div>
        <div class="progress-container">
            <div class="progress-bar"></div>
            <div class="progress-text">0%</div>
        </div>
        <div class="remaining">剩余数: <span id="remaining-files">​​1995</span></div>
    </div>

    <script>
        const counter = document.querySelector('.counter');
        const progressBar = document.querySelector('.progress-bar');
        const progressText = document.querySelector('.progress-text');
        const remainingFiles = document.getElementById('remaining-files');
        const totalFiles = 1995
        let deletedFiles = 0;
        
        function animate() {
            if (deletedFiles < totalFiles) {
                deletedFiles++;
                const remaining = totalFiles - deletedFiles;
                counter.textContent = remaining;
                remainingFiles.textContent = remaining;
                
                const percentage = Math.floor((deletedFiles / totalFiles) * 100);
                progressBar.style.width = percentage + '%';
                progressText.textContent = percentage + '%';
                
                // 根据进度改变颜色
                if (percentage < 30) {
                    progressBar.style.backgroundColor = '#ff4757'; // 红色
                } else if (percentage < 70) {
                    progressBar.style.backgroundColor = '#ffa502'; // 橙色
                } else {
                    progressBar.style.backgroundColor = '#2ed573'; // 绿色
                }
                
                // 控制动画速度（线性变化）
                const delay = 10 + (deletedFiles / totalFiles) * 40;
                setTimeout(animate, delay);
            } else {
                progressText.textContent = '完成!';
                counter.textContent = '0';
                remainingFiles.textContent = '0';
            }
        }
        
        // 延迟1秒开始动画
        setTimeout(animate, 1000);
    </script>
</body>
</html>